<!--
 * @Desc:
 * @author cheegon
 * @date 2024/07/01  上午11:04
-->
<template>
  <div class="v_main">
    <el-upload
        action="#"
        :multiple="uploadInfo.limit>1"
        :http-request="handleUploadFile"
        :before-upload="handleBeforeUpload"
        :on-success="handleSuccess"
        :on-change="handleChange"
        :file-list="fileList"
        :show-file-list="false"
        :accept="uploadInfo.accept"
        :auto-upload="true">
      <div class="dflex">
        <div v-for="(item,index) in imageList" style="margin-right: 10px" :key="index" class="v_pic_item_lv0">
          <el-image v-if="uploadInfo.limit==1" style="width: 150px; height: 150px;border-radius: 4px;" :src="item"
                    alt=""></el-image>
          <el-image v-else @click.stop style="cursor:default;width: 150px; height: 150px;border-radius: 4px;" :src="item"
                    alt=""></el-image>
          <div class="v_item_bottom" @click.stop style="cursor:default">
            <i class="el-icon-zoom-in " style="cursor:pointer;color: white;font-size: 26px;margin-right: 20px" @click.stop="handlePreview(item)"></i>
            <i class="el-icon-delete" style="cursor:pointer;color: white;font-size: 26px" @click.stop="handleRemove(item)"></i>
          </div>
        </div>
        <i  class="el-icon-plus" v-if="imageList.length<uploadInfo.limit"
           style="width: 150px; height: 150px;border-radius: 4px;border: 1px solid #666666;font-size: 36px;text-align: center;line-height: 150px;margin-left: 10px "></i>
      </div>
    </el-upload>
    <el-image-viewer :z-index="999999999999" append-to-body v-if="isShowPreviewPop" :on-close="handlePreviewClose"
                     :url-list="previewList"/>
  </div>
</template>

<script>
import { reqUpload } from '@/api/uploadApi'
import { compressAccurately } from 'image-conversion'
import elImageViewer from 'element-ui/packages/image/src/image-viewer'

const defInfo = () => {
  return {
    fileType: 'img',
    limit: 1,
    maxFileSize: 2,
    title: '图片上传',
    accept: 'image/jpeg,image/jpg,image/png',
    compress: true
  }
}
export default {
  name: "SimpleUpload",
  components: { elImageViewer },
  props: ['info'],
  data() {
    return {
      uploadInfo: defInfo(),
      loading: false,
      disabled: false,
      isShowPreviewPop: false,
      uploadCount: 0,
      previewList: [],
      fileList: [],
      imageList: [],
    }
  },
  created() {
  },
  methods: {
    refresh() {
      this.uploadInfo = Object.assign({}, defInfo(), this.info)
      this.imageList = this.uploadInfo.imageList;
      this.uploadCount = this.imageList.length
    },
    handlePreview(url) {
      this.isShowPreviewPop = true
      this.previewList = [url]
    },
    handlePreviewClose() {
      this.isShowPreviewPop = false
    },
    handleRemove(item) {
      this.imageList = this.imageList.filter(it => {
        return item != it
      })
      this.emitInput('')
    },
    handleBeforeUpload(file) {
   //   console.log('handleBeforeUpload')
      if (this.uploadInfo.fileType === 'img') {
        const isJPG = this.judgeImg(file.type)
        const isNormalSize = file.size / 1024 / 1024 < this.uploadInfo.maxFileSize
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!')
          return false
        }
        if (this.uploadInfo.compress) {
          return new Promise((resolve) => {
            if (isNormalSize) {
              resolve(file)
            } else {
              compressAccurately(file, 400).then(res => {
                resolve(res)
              })
            }
          })
        } else {
          if (!isNormalSize) {
            this.$message.warning(`图片过大, 单张图片最大不能超过${ this.uploadInfo.maxFileSize }M`)
            return false
          }
        }
      }
      return true
    },
    handleUploadFile(params) {
      let limit = this.uploadInfo.limit
      if (limit != 1 && this.uploadCount >= limit) {
        this.$message.warning(`最多只能上传${ limit }个文件!`)
        return
      }
      if (this.uploadInfo.fileType === 'img') {
        this.uploadCount++
        this.loading = true
        let file = params.file
        const form = new FormData()
        form.append('file', file)
        reqUpload(form).then(data => {
          this.emitInput(data.url)
          this.loading = false
        }).catch(() => {
          this.uploadCount--
          this.loading = false
        })
      }
    },
    handleChange(file, fileList) {
      // console.log('handleChange')
      // console.log(file)
      // console.log(fileList)
    },
    handleSuccess(file) {
    },
    emitInput(val) {
      if (val) {
       // this.$emit('input', val)
        if (this.uploadInfo.limit == 1) {
          this.imageList = [val]
        } else {
          this.imageList.push(val)
        }
      }
      this.$emit("complete", this.imageList)
    },
    /**
     * 判断是否是img
     * @param type
     * @returns {boolean}
     */
    judgeImg(type) {
      return type === 'image/jpeg' || type === 'image/jpg' || type === 'image/png'
    },
  }
}
</script>

<style lang="stylus" scoped>
.v_pic_item_lv0 {
  position relative
  width 150px
  height 150px

  &:hover {
    .v_item_bottom {
      opacity 1;
      display flex
      flex-direction row

    }
  }

  .v_item_bottom {
    //pointer-events: none;
   // pointer-events: none;
    width 100%
    height 54px
    position absolute
    bottom 0
    left 0
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0px 0px 4px 4px;
    z-index 999
    display flex
    flex-direction row
    align-items center
    justify-content center
    opacity 0
    transition opacity 0.3s

    img {
      width 14px
      height 14px
    }

    p {
      margin-left 5px
      font-size: 12px;
      font-family: MicrosoftYaHei;
      color: #FFFFFF;
    }
  }
}
</style>
